<template>
    <div class="container">
        <div class="header">
            <div class="title">用户列表</div>
            <div class="right-tool">
                <el-button type="success" @click="getData">刷新</el-button>
                <el-button type="primary" @click="openDialog('add')">新增</el-button>
            </div>
        </div>
        <el-table :data="tableData" border header-row-class-name="tbl-header" row-class-name="tbl-row" style="width: 100%" :max-height="670">
            <el-table-column prop="user_name" label="用户名" width="180" />
            <el-table-column prop="phone_num" label="手机号" width="180" />
            <el-table-column prop="age" label="年龄" />
            <el-table-column prop="create_time" label="创建时间" />
            <el-table-column prop="update_time" label="更新时间" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="openDialog('edit', scope.row._id)">编辑</el-button>
                    <el-button size="small" type="danger" @click="deleteUser(scope.row._id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <el-dialog v-model="dialog.visible" :title="dialog.title" width="30%" @close="resetForm">
        <div class="dialog-content">
            <el-form label-width="100px" :model="form">
                <el-form-item label="用户名">
                    <el-input v-model="form.user_name" />
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="form.phone_num" />
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="form.age" />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialog.visible = false">取消</el-button>
                <el-button type="primary" @click="dialog.sure">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import to from 'await-to-js'
import Api from '@/api'
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const dialog = ref({
    visible: false,
    title: '',
    sure: () => {}
})
const tableData = ref([])
const form = reactive({
    user_name: '',
    phone_num: '',
    age: null
})

const openDialog = (type, _id) => {
    console.log('openDialog', type, _id)
    const option = {
        add: {
            title: '新增用户',
            sure: () => addUser()
        },
        edit: {
            title: '编辑用户',
            sure: () => updateUser(_id)
        }
    }
    dialog.value.visible = true
    dialog.value.title = option[type].title
    dialog.value.sure = option[type].sure
    if (type === 'edit') {
        getDetail(_id)
    }
}

const getData = async () => {
    const [err, res] = await to(Api.user.getUserList())
    if (!err) {
        tableData.value = res?.data || []
    }
}

const getDetail = async _id => {
    console.log('getDetail', _id)
    const params = {
        _id
    }
    const [err, res] = await to(Api.user.getDetail(params))
    if (!err) {
        form.user_name = res?.data?.user_name
        form.phone_num = res?.data?.phone_num
        form.age = res?.data?.age
    }
}

const addUser = async () => {
    const [err] = await to(Api.user.addUser(form))
    if (!err) {
        dialog.value.visible = false
        getData()
    }
}

const updateUser = async _id => {
    const params = {
        _id,
        ...form
    }
    const [err] = await to(Api.user.updateUser(params))
    if (!err) {
        dialog.value.visible = false
        getData()
    }
}

const deleteUser = _id => {
    ElMessageBox.confirm('确定删除此用户吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(async () => {
            const [err] = await to(Api.user.deleteUser({ _id }))
            if (!err) {
                ElMessage({
                    type: 'success',
                    message: '删除成功'
                })
                getData()
            }
        })
        .catch(() => {})
}

const resetForm = () => {
    form.user_name = ''
    form.phone_num = ''
    form.age = null
}

onMounted(() => {
    getData()
})
</script>

<style lang="scss" scoped>
.container {
    padding: 40px 30px;
    :deep(.tbl-header) {
        height: 70px;
    }
    :deep(.tbl-row) {
        height: 60px;
    }
    .header {
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title {
            font-size: 20px;
            color: #666666;
        }
    }
}
.dialog-content {
    padding: 0 200px 0 0;
}
</style>
